import { getMovie } from '../../api/movie';
import { createMovieTags } from '../list';
import style from './index.module.less'
import $ from 'jquery'

let container
/**
 * 初始化函数，负责创建容器
 */
function init() {
  container = $('<div>').addClass(style.container).appendTo('#app')
}

init();

/**
 * 根据传入的页码、页容量、总记录数，创建分页区域的标签
 * @params page 页码
 * @params limit 页容量
 * @params total 总页数
 */
export function createPagers(page, limit, total) {
  container.html('')
  /**
   * 辅助函数，负责帮忙创建一个页码标签
   * @params text 标签的文本
   * @params status 标签的状态，空字符串-普通状态，disabled-禁用状态，active-选中状态
   */
  function createTag(text, status, targetPage) {
    const span = $('<span>').addClass(style[status]).text(text).appendTo(container)
    span.on('click', async function () {
      const resp = await getMovie(targetPage, limit)
      createMovieTags(resp.data.movieList)
      createPagers(targetPage, limit, resp.data.movieTotal)
      window.scrollTo(0, document.documentElement.clientHeight)
    })
  }

  const maxPages = Math.ceil(total / limit)

  //1. 创建首页标签
  createTag('首页', page === 1 ? 'disable' : '', 1)
  //2. 创建上一页标签
  createTag('上一页', page === 1 ? 'disable' : '', page - 1)
  //3. 创建数字页码标签
  let titleShowNum = 10 //展示页数
  titleShowNum = titleShowNum < maxPages ? titleShowNum : maxPages
  let min = page - Math.floor(titleShowNum / 2)
  if (min <= 0) {
    min = 1
  }
  let max = min + titleShowNum
  if (max > maxPages) {
    max = maxPages
    min = maxPages - titleShowNum + 1
  }
  for (let i = min; i <= max; i++) {
    createTag(i, i === page ? 'active' : '', i)
  }
  //4. 创建下一页标签
  createTag('下一页', page === maxPages ? 'disable' : '', page + 1)
  //5. 创建尾页标签
  createTag('尾页', page === maxPages ? 'disable' : '', maxPages)
}